<template>
	<view class="personal">
		<view class="header">
			<!-- 登录状态 -->
			<template v-if="userInfo.nickName">
				<view class="Login">
					<image class="userImg" :src="userInfo.avatarUrl" mode=""></image>
					<text>{{userInfo.nickName}}</text>
					<button type="warn" class="exit" @click="exit">退出登录</button>
				</view>
			</template>
			<!-- 未登录 -->
			<template v-else>
				<view class="Login">
					<image class="userImg" src="../../static/images/personal/personal.png" mode=""></image>
					<text @click="toLogin">去登录</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			};
		},
		mounted() {
			//从本地存储中获取个人信息
			wx.getStorage({
			  key: 'userinfo',
			  success: (res) => {
			    // console.log(res)
				if(res.data) {
					this.userInfo = JSON.parse(res.data)
				}
			  }
			})
		},
		methods: {
			toLogin() {
				wx.reLaunch({
					url: "/pages/login/login"
				})
			},
			exit() {
				wx.removeStorage({
				  key: 'userinfo',
				  success (res) {
				    // console.log(res)
					wx.reLaunch({
						url: "/pages/login/login"
					})
				  }
				})
			}
		},
	}
</script>

<style lang="less">
	.personal {
		.header {
			height: 300rpx;
			background-color: #EED7B5;
			line-height: 300rpx;
			.Login {
				display: flex;
				.userImg {
					width: 100rpx;
					height: 100rpx;
					vertical-align: middle;
					margin: 100rpx 50rpx 0 50rpx;
				}
				.exit {
					text-align: right;
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 150rpx;
				}
			}
		}
	}
</style>
